<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="http://img.gaosan.com/upload/201911/20191115090852031.jpg" alt />
      </div>
      <div class="swiper-slide">
        <img src="http://img.gaosan.com/upload/201911/20191115090143419.jpg" alt />
      </div>
      <div class="swiper-slide">
        <img src="http://img.gaosan.com/upload/201911/20191114165710013.jpg" alt />
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div v-if="!swiperOption.isSamllScreen" class="swiper-button-prev"></div>
    <div v-if="!swiperOption.isSamllScreen" class="swiper-button-next"></div>
  </div>
</template>

<script>
import "swiper/css/swiper.min.css";
import Swiper from "swiper";
export default {
  data() {
    return {
      swiperOption: {}
    };
  },
  methods: {
    initSwiper() {
      this.swiper = new Swiper(".swiper-container", this.swiperOption);
    },
    toCrouseInfo(id) {
      this.$router.push({
        path: "/crouse_info",
        query: {
          id
        }
      });
    }
  },
  created() {
    if (this.global.SCREEN_WIDTH > 576) {
      this.swiperOption = {
        autoplay: true, //可选选项，自动滑动
        slidesPerView: 2,
        centeredSlides: true,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      };
    } else {
      this.swiperOption = {
        isSamllScreen: true,
        autoplay: true, //可选选项，自动滑动
        slidesPerView: 1,
        loop: true,
        pagination: {
          el: ".swiper-pagination"
        }
      };
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initSwiper();
    });
  }
};
</script>

<style lang="scss">
@media screen and (min-width: 1200px) {
  .swiper-container {
    --swiper-navigation-color: rgba(255, 255, 255, 0.7); /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px; /* 设置按钮大小 */
    --swiper-pagination-color: #ffffff;
  }
  .swiper-container {
    width: 100%;
    .swiper-slide {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media screen and (max-width: 1200px) and (min-width: 992px) {
  .swiper {
    overflow: hidden;
    width: 100%;
    transition: all 0.4s;
    margin: 0 auto;
    height: 220px;
  }

  .el-carousel__item:nth-child(2n) {
    height: 200px;
    img {
      height: 200px;
    }
  }

  .el-carousel__item:nth-child(2n + 1) {
    height: 200px;
    img {
      height: 200px;
    }
  }
}
@media screen and(max-width: 992px) and (min-width: 768px) {
}
@media screen and(max-width: 768px) and (min-width: 576px) {
}
@media screen and(max-width: 576px) {
  .swiper-container {
    --swiper-navigation-color: rgba(255, 255, 255, 0.7); /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px; /* 设置按钮大小 */
    --swiper-pagination-color: #ffffff;
  }
  .swiper-container {
    width: 100%;
    .swiper-slide {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>